<template>
	<view class="couponlist">
		<view class="couponbox" v-for="(item,index) in couponList" :key="index">
			<view class="coupon">
				<view class="coupon-left">
					<view class="price"> {{item.discountPrice}}</view>
					<view class="priceuse"> 满{{item.usePrice}}元可用</view>
				</view>
				<view class="coupon-right">
					<view class="coupontitle"> {{item.name}}</view>
					<view class="coupontime"> {{item.validEndTime | formatDate('YYYY-MM-DD')}}到期</view>
					<view class="couponbar" @click="show(index)">
						使用说明 <u-icon name="arrow-right" size="15"></u-icon>
					</view>
				</view>
				<view class="btn" @click="btnBack(item)" v-if="item.canTake"> 领取 </view>
				<view class="btn" style="background-color: #AAAAAA;" @click="btnBackbtnBackNavigate(item)" v-else> 使用 </view>
			</view>
			<view class="descript" v-if="item.showDescript">
				<view v-if="item.type ==3">
					1.仅限于服务人员{{item.descStaffUser}}可用 
				</view >
				<view v-else>
					1.仅限于该服务人员可用 
				</view >
				<view>
					2.{{item.descCoupon}}可用
				</view>
				<view>
					3.{{item.validEndTime | formatDate('YYYY-MM-DD')}}到期，过期无效
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "woods-coupon",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			// 0员工1.商户2.商品
			type: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				couponList: [],
				typeName:'人员'
			};
		},
		watch: {
			list: {
				handler(newVal, oldVal) {
					if (newVal.length) {
						this.couponList = newVal
					} else {
						this.couponList = []
					}
				},
				deep: true,
				immediate: true,
			},
			type(val){
				if(val=="0"){
					this.typeName="人员"
				}else if(val=="1"){
					this.typeName="商家"
				}else if(val=="2"){
					this.typeName="产品"
				}
			}
		},
		methods: {
			show(i){
				this.$set(this.couponList[i],"showDescript",!this.couponList[i].showDescript)
			},
			btnBack(item) {
				this.$emit("btnBack", item)
			},
			btnBackbtnBackNavigate(item) {
				uni.navigateBack()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.couponlist {
		padding: 20rpx;
	}
	.couponbox{
		
	}
	.coupon {
		background: #fff url('https://jiejinda.oss-cn-beijing.aliyuncs.com/bc23b3dec3aff55f7c83c6620effa30067bb5c4cd48a2e0ce7c8085687548b25.png') 0 0 no-repeat;
		background-size: cover;
		height: 180rpx;
		width: 100%;
		display: flex;
		position: relative;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.coupon-left {
			width: 32%;

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.price {
				font-weight: bold;
				font-size: 72rpx;
				color: #FFFFFF;
				line-height: 40rpx;

			}

			.priceuse {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 15rpx;
				line-height: 40rpx;
			}

		}

		.coupon-right {
			width: 55%;

			.coupontitle {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				text-align: left;
				margin-left: 10rpx;
				line-height: 60rpx;
			}

			.coupontime {
				font-size: 24rpx;
				color: #999999;
				line-height: 58rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 18rpx;
			}

			.couponbar {
				font-size: 24rpx;
				display: flex;
				color: #999999;
				line-height: 58rpx; 
				margin-left: 12rpx;
			}
		}

		.btn {
			position: absolute;
			right: 12rpx;
			top: 60rpx;
			background: #277EEF;
			border-radius: 34rpx;

			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			padding: 10rpx 25rpx;
		}
	}
	.descript {
		background-color: #F0F0F0;
		font-size: 20rpx;
		color: #666;
		padding: 16rpx 24rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
</style>